<template>
	<div>
		<div v-if="loading || error">{{ error || '数据加载中...' }}</div>
		<div v-else-if="item">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="(v, i) in item.urls" :key="i">
					<LazyLoadImg :src="v" width="100vw" height="200px" />
				</van-swipe-item>
			</van-swipe>
			<h3>{{ item.desc }}</h3>
			<p class="p">
				<span>{{ item.auther }}</span>
				<span>{{ item.read }}阅读量</span>
				<span>{{ item.date }}</span>
			</p>
			<div>
				文章内容
			</div>
			<!-- 评论列表 -->
			<ul>
				<li v-for="(v, i) in item.mess" :key="i">
						<dl>
							<dt>
								<img :src="v.avator" alt="">
							</dt>
							<dd>
								<div>
									<span>{{ v.nickname }}</span>
									<span>{{ v.datetime }}</span>
								</div>
								<p>{{ v.content }}</p>
							</dd>
						</dl>
				</li>
			</ul>
		</div>
	</div>
</template>


<script setup lang="ts">
import { ref, defineProps, onMounted } from 'vue'
import { fetchDetailItem } from '@/api'
import { Notify } from 'vant';
import { useRouter } from 'vue-router';
import LazyLoadImg from '@/components/lazyLoadImg/indexView.vue'
interface ItemState {
	id: string,
	urls: string[],
	desc: string,
	auther: string,
	read: number,
	date: string,
	mess: MessState[]
}

interface MessState {
	"nickname": string,
	"datetime": string,
	"avator": string,
	"content": string
}

const item = ref<ItemState>()
const props = defineProps(['id'])
const loading = ref(true)
const error = ref('')
const router = useRouter()
const fetchDetail = async () => {
	loading.value = true
	try {
		const resp = await fetchDetailItem(props.id)
		const { code, data, message } = resp.data;
		if (code === 200) {
			item.value = resp.data.data
		} else {
			Notify({ type: 'danger', message });
			router.push('/home')
		}

	} catch (e: any) {
		error.value = e.message
	}
	loading.value = false
}

onMounted(() => {
	fetchDetail()
})
</script>

<style scoped lang="scss">
.p {
	span {
		margin: 0 10px;
	}
}

ul li {
	border-bottom: 1px solid #ccc;
	dl {
		padding: 6px;
		display: flex;
		dt {
			img {
				border-radius: 50%;
				height: 60px;
			}
		}

		dd {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 4px;
			div {
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
</style>